<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>OAL</title>
        <link rel="stylesheet"  href="../../common/css/bootstrap.min.css">
        <link rel="stylesheet"  href="../../common/css/standard.css">
    </head>
    <body>
        <div class="oal-page oal-page-home">
            <!--Content -->
            <div class="oal-page-content-section">
                <!-- Header -->
                <div class="oal-page-header-fixed">
                    <div class="oal-page-header row">
                        <div class="oal-page-header-logo-section">
                            <div class="oal-page-header-logo"></div>
                        </div>
                        <div class="oal-page-header-actions text-right">
                            <div class="oal-page-header-menu-list">
                                <div class="oal-page-header-menu-item oal-page-header-menu-promotion isActive">
                                    <span>Seabird Promotion</span>
                                </div>
                                <div class="oal-page-header-menu-item oal-page-header-menu-myRate">
                                    <div>My Rates<span class="badge">New</span></div>
                                </div>
                                <div class="oal-page-header-menu-item oal-page-header-menu-myShipment">
                                    <div>My Shipments<span class="badge">New</span></div>
                                </div>
                                <div class="oal-page-header-menu-item oal-page-header-menu-notification ">
                                    <span>Notification</span>
                                    <a  id="notificationPopover" data-container="body"
                                          data-placement="bottom" data-html="true"
                                          data-content="<div><ul class='popover-list'>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      </ul>
                                      <div class='popover-list-more'><a href='#'>More &gt;&gt;</a></div>
                                      </div>">
                                <span class="badge">
                                    New
                                </span></a>
                                </div>

                                <div class="oal-page-header-menu-item oal-page-header-userProfile">
                                    <div aria-expanded="true" aria-haspopup="true" data-toggle="dropdown" class="btn-userProfile">
                                        <span class="btn-userProfile-image"><img width="22px" src="../../common/images/default.png"></span>
                                        <span class="action">Jason</span>
                                        <span class="caret"></span>
                                    </div>
                                    <ul class="dropdown-menu oal-page-header-menu-dropdown">
                                        <li><a href="homepage_setting.html"><span class= "pull-left oal-page-menu-icon-setting"></span>&nbsp;&nbsp;Setting</a></li>
                                        <li><a href="#"><span class="pull-left oal-page-menu-icon-logOut"></span>&nbsp;&nbsp;Logout</a></li>
                                    </ul>
                                </div>
                                <div class="oal-page-header-menu-item oal-page-header-menu-setting">
                                    <span>Setting</span>
                                </div>
                                <div class="oal-page-header-menu-item oal-page-header-menu-logout">
                                    <span>Logout</span>
                                </div>
                            </div>

                            <div class="oal-page-header-chat-miniScreen">
                                <a class="hamburger menu" href="javascript:void(0)"  data-tiggle="click" data-toggle="tooltip" data-placement="bottom" title="Menu" >
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Content -->
                <div class="oal-page-content">
                    <!-- Promo -->
                    <div class="oal-page-content-promo">
                        <div class="row oal-promo-item-list hide oal-promo-item-template">
                            <div class="oal-promo-item">
                                <div class="oal-box-shadow">
                                    <div  class="oal-promo-item-bg-image" >

                                    </div>
                                    <div class="oal-promo-item-bg" title="Click for Promotion Details"></div>
                                    <div class="oal-promo-item-sale oal-promo-item-sale-default" align="center">
                                        <div class="oal-promo-item-sale-text">
                                            <div class="oal-promo-item-sale-text-to">to</div>
                                            <div class="oal-promo-item-sale-text-port">Shanghai</div>

                                            <div class="oal-promo-item-sale-text-sale-area style-1 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">

                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-2 hide">
                                                <div class="oal-promo-item-sale-text-sale-more">More than</div>
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">
                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-3 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per-title ">
                                                        Lower Price
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-valid">Valid</div>
                                            <div class="oal-promo-item-sale-text-char">until</div>
                                            <div class="oal-promo-item-sale-text-number">Jun 07</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-actions">
                                        <div class="oal-promo-item-actions-detail">Click for Details <span class="glyphicon glyphicon-menu-down"></span></div>
                                        <div class="oal-promo-item-actions-records hide"  data-toggle="tooltip" data-placement="top" title="You had book this at">
                                            <span>My Booking</span>
                                        </div>
                                        <div class="oal-promo-item-actions-book hide">
                                            <span>Book Now</span>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-detail-info">
                                        <div class="oal-promo-item-detail-ss">

                                            <div class="oal-promo-item-detail-ss-etd">
                                                <div>ETA</div>
                                                <div>Aug 05</div>
                                                <div>TUE</div>
                                            </div>
                                            <div class="oal-promo-item-detail-ss-port">
                                                <div>
                                                    <span class="detail-icon"><img src="../../common/images/vessel.png"  /></span>
                                                    <span class="detail-to hide">to</span>
                                                    <span class="detail-pod"></span>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="oal-promo-item-time-alert hide">
                                        <div class="oal-promo-item-time-alert-msg">
                                            <div><h2>&nbsp;</h2></div>
                                            <div>Today Only</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-alert hide">
                                        A visitor made booking today with this promotion.
                                    </div>
                                    <div class="oal-promo-item-sold hide">
                                        <span>SOLD<br>OUT</span>
                                    </div>
                                    <div class="oal-promo-item-book">
                                        <span>Book<br>Now</span>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="oal-promo-item-list-all"></div>
                        <div class="oal-promo-item-detail-overall  oal-promo-item-detail-overall-template hide oal-promo-item-detail-overall-init">
                            <div class="oal-promo-item-detail-overall-detail">
                                <!--
                                <div class="oal-promo-item-detail-overall-detail-title">
                                    <span class="detail-por">Southampton</span>
                                    <span class="oal-promo-item-detail-ss-transhipment-arrow"></span>
                                    <span class="detail-pod">Shanghai</span>
                                </div>
                                -->
                                <div class="row oal-promo-item-detail-overall-detail-result">
                                    <div class="col-lg-5 col-md-12 col-sm-12 oal-promo-item-detail-overall-detail-result-section1">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12  oal-promo-item-detail-overall-detail-title-box text-center">
                                                <div class="oal-promo-item-detail-overall-detail-title">
                                                    <div class="detail-por text-center">
                                                        <span class="city">Southampton</span>
                                                        <div class="detail-etd">Jul 05, Mon</div>
                                                    </div>
                                                    <div class="detail-arrow text-center">
                                                        <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                        <div class="detail-vessel-voyage text-center">NYK REMUS-039W</div>
                                                    </div>
                                                    <div class="detail-pod text-center">
                                                        <span class="city">Sydney</span>
                                                        <div class="detail-eta">Aug 05, Mon</div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row detail-info-margin">
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">CY Cutoff</h5>
                                                <h5 class="result">Jun 12, Mon</h5>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <h5 class="label">Commodity</h5>
                                                <h5 class="result">General Cargo</h5>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">Volume</h5>
                                                <h5 class="result">Min. 10 TEU</h5>
                                            </div>
                                            <div class="col-lg-5 col-md-5 col-sm-5 oal-promo-item-detail-overall-detail-result-hau">
                                                <h5 class="label">Haulage</h5>
                                                <div class="haulage-box">
                                                    <div class="haulage">CY/CY</div>
                                                    <div class="tips-icon">
                                                        <span class="glyphicon glyphicon-info-sign"></span>
                                                    </div>
                                                    <div class="tips">
                                                        <span>For door service haulage rate would apply.</span>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="hidden-lg col-md-12 col-sm-12 col-xs-12 special-requirement-margin"></div>
                                    <div class="col-lg-3 col-md-5 col-sm-12 oal-promo-item-detail-overall-detail-result-section2">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Special Requirement</h5>
                                                <h5 class="result">
                                                    Light Weight Cargo (10~15 Tons per TEU)
                                                </h5>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 remarks-margin">
                                                <h5 class="label">Remarks</h5>
                                                <h5 class="result">Subject to DOC, LSS and all destination charges.</h5>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-7 col-sm-12 oal-promo-item-detail-overall-detail-result-section3">
                                            <div class="row freight-section freight-section-border">
                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <h5 class="label">Ocean Freight</h5>
                                                    <table class="oal-promo-item-detail-overall-rate-table">
                                                        <tr>
                                                            <td>USD</td>
                                                            <td><span class="highlightText">$900</span>/20GP</td>
                                                            <td><span class="highlightText">$1000</span>/40GP</td>
                                                            <td><span class="highlightText">$1200</span>/40HQ</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12 inland-surcharge-margin">
                                                    <h5 class="label">Inland Surcharge</h5>
                                                    <div class="row">
                                                        <div class="oal-promo-item-detail-overall-inland-surcharge">
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 inland-city">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon inland-surcharge-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                        <input type="text" class="form-control inland-surcharge-field" placeholder="Inland City" aria-describedby="basic-addon1">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 surcharge">
                                                                    <span class="currency">USD</span><span class="fee">$0</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>

                                </div>

                                <div class="oal-promo-item-detail-overall-action">
                                    <button class="btn btn-promo-action">Chat for any enquiries or book now</button>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- No Promo -->
                    <div class="oal-page-content-no-promo">
                        <div class="oal-page-content-no-promo-bg"></div>
                        <div class="oal-page-content-no-promo-title-box">
                            <div class=oal-page-content-no-promo-title>
                                Welcome to OOCL
                            </div>
                        </div>

                    </div>
                    <!--News -->
                    <div class="oal-page-content-news-section oal-box-shadow">
                        <div class="oal-page-content-news-list">
                            <div class="oal-page-content-news-title">News Around Your Region</div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 news">
                                    <div class="news-item">
                                        <div class="news-date">
                                            <span class="news-date-day">20</span>
                                            <span class="news-date-month">Jun</span>
                                        </div>
                                        <div class="news-text">
                                            <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                            <div class="news-text-details">Today is an exciting day that we start serving you �?our valued customer.  Hope you enjoy the new experience in Seabird and we are looking forward to hearing your valuable feedback.</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="oal-page-content-news-item-detail ">
                            <div class="news-content oal-box-shadow">
                                <div class="news-content-left-bar">
                                    <div class="news-content-left-bar-elements">
                                        <span class="news-content-back-icon"></span>
                                        <span>Back</span>
                                    </div>

                                </div>
                                <div class="news-content-details ">
                                    <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                    <div class="news-text-date">
                                        <span><img src="../../common/images/calender.png" width="22px"/> May 05 2016, Mon</span>
                                    </div>
                                    <div class="news-text-details"><p>Hong Kong Members of the G6 Alliance today announced additional void sailings within their Asia-Europe product to adjust to market demand.<br>

                                        As the G6 Alliance continues to review its product profile, the Loop 6 service will be suspended until further notice.<br>

                                        In order to deliver continuous coverage and service, the G6 Alliance will continue to provide the following rotation:<br>

                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.</p></div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!--my rates -->
                    <div class="oal-page-content-rate-section hide oal-box-shadow">
                        <div class="oal-page-content-rate-title">MY RATES</div>
                        <div >
                            <iframe  height="800px" src="http://chenji5-3-w7:90/NJS_PRS_CUST/myRates?userId=poonhs"></iframe>
                        </div>
                    </div>
                </div>

                <!-- Footer -->

                <div class="oal-page-footer">
                    <div class="oal-page-footer-detail row">

                        <div class="col-lg-6 col-md-6 col-sm-6 text-left">
                            <div class="oal-page-footer-section  ">

                                <div class="oal-page-footer-copyRight ">Copyright © 1998-2016. <br>Orient Overseas Container Line Limited. <br>All rights reserved.</div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-md-6  col-sm-6">
                            <div class="oal-page-footer-section">
                                <div class="oal-page-footer-phone-images">
                                    <img src="../../common/images/phone.png"/>
                                </div>
                                <div class="oal-page-footer-section-message text-left">
                                    <div class="oal-page-footer-section-title">OOCL Seabird</div>
                                    <p>Your shipment assistance who answer your shipment enquiry anytime anywhere</p>
                                    <button class="btn btn-promo-action">Chat for App trial</button>
                                </div>
                                <div class="oal-page-footer-download-images">
                                    <div class="oal-page-footer-download-google"></div>
                                    <div class="oal-page-footer-download-app"></div>

                                </div>
                            </div>

                        </div>


                    </div>
                </div>


            </div>
            <!-- Chat -->
            <div class="oal-page-chat-section">
                <div class="arrow"></div>

                <div class="oal-page-side-bar">
                    <div class="oal-page-chat-active-icon"></div>
                    <div class="oal-page-chat-active-item" id="btn_chat">
                        <div class="icon-text oal-page-chat-icon">Chat</div>
                        <span class="badge"> 3 </span>
                    </div>
                    <div class="oal-page-booking-item">
                        <div class="icon-text oal-page-booking-item-icon"><i class="fa fa-gavel" aria-hidden="true"></i><br>Book</div>
                    </div>
                    <div class="oal-page-side-top">
                        <span class="glyphicon glyphicon-arrow-up"></span><div>Top</div>
                    </div>
                </div>

                <div class="oal-page-chat-layer">
                    <iframe id="chatIframe" src="http://chenji5-3-w7:90/NJS_PRS_CUST/secured/chat?userId=poonhs"></iframe>

                </div>

            </div>

        </div>

        <!--include JS File -->
        <script src="../../common/js/jquery-1.12.4.js"></script>
        <script src="../../common/js/bootstrap.js"></script>
        <script src="../controler/homepage.js"></script>
        <script type="text/javascript">
            $('.oal-page-content-promo').hide();
            $('.oal-page-content').append('<div class="loader">loading</div>');
            setTimeout(function(){
                $('.loader').hide();
                $('.oal-page-content-promo').show();
            },3000);

        </script>
    </body>
</html>